<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/js/easyui/themes/ui-cupertino/easyui.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/js/easyui/themes/exts.css">
    <script type="text/javascript" src="${ctx}/static/js/plugins/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:80px;background:#b5d2b5 url(static/images/topbg.png);border: none;border-bottom: 2px #225b16 solid;">
        <div class="fr">
            <ul class="base">
                <li>
                    <img src="static/images/touxiang.jpg" style="width:60px;height:60px;border-radius: 30px;"/>
                </li>
                <li>2016/08/31 11:02:58</li>
                <li class="dropdown"><a href="#">消息<span class="badge">4</span></a>
                    <ul class="dropdown-menu" style="right:2px;width:500px;">
                        <li class="msg"><a href="changepwd.html"><i class="fa fa-1_2 fa-envelope" style="color:#F7BB43;"></i> 是电磁波的可视光部分中的长波，波长大约为590~610nm</a></li>
                        <li class="msg"><a href="#"><i class="fa fa-1_2 fa-envelope" style="color:#F7BB43;"></i> 我们假设3个标题的li列表布局，对li对象设置一定宽度和高度</a></li>
                        <li class="msg"><a href="login.html"><i class="fa fa-1_2 fa-envelope" style="color:#F7BB43;"></i> 我们假设3个标题的li列表布局，对li对象设置一定宽度和高度</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#">我的账户<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="changepwd.html"><i class="fa fa-lg fa-lock"></i> 修改密码</a></li>
                        <li><a href="#"><i class="fa fa-user" style="font-size:1.2em"></i> 我的资料</a></li>
                        <li class="divider"></li>
                        <li><a href="login.html"><i class="fa fa-power-off" style="font-size:1.2em"></i> 注销登陆</a></li>
                    </ul>
                </li>
                <li class="dropdown" style="text-align: right"><a href="#">皮肤切换<i class="fa fa-tree"></i></a>
                    <ul class="dropdown-menu" style="right:5px;width:100px">
                        <li class="skin"><a href="#"><i class="fa fa-leaf b_black"></i> black</a></li>
                        <li class="skin"><a href="#"><i class="fa fa-leaf b_purple"></i> bootstrap</a></li>
                        <li class="skin"><a href="#"><i class="fa fa-leaf b_yellow"></i> default</a></li>
                        <li class="skin"><a href="#"><i class="fa fa-leaf b_blue"></i> metro</a></li>
                        <li class="skin"><a href="#"><i class="fa fa-leaf b_green"></i> gray</a></li>
                    </ul>
                </li>
            </ul>
            <div class="fl" style="color:#fff;padding:5px;margin-top:10px;">
                昵称：测试看看 职位：教师 IP地址：127.0.0.1
            </div>
        </div>
        <div class="nav">
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 表单元素</a>
            <a href="#" class="easyui-menubutton" data-options="menu:'#mm1', plain:false"><i class="fa fa-table"></i> 表格</a>
            <a href="#" class="easyui-menubutton" data-options="menu:'#mm2', plain:false"><i class="fa fa-table"></i> DataGrid</a>
            <a href="#" class="easyui-menubutton" data-options="menu:'#mm3', plain:false"><i class="fa fa-table"></i> 弹出窗口</a>
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 图形报表</a>
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 框架组件</a>
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 其他插件</a>
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 综合应用</a>
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 在线文档</a>
            <a href="#" class="easyui-linkbutton"><i class="fa fa-check-square-o"></i> 系统设置</a>
        </div>
        <div id="mm1" style="width:150px;">
            <div data-options="iconCls:'icon-undo'">Undo</div>
            <div data-options="iconCls:'icon-redo'">Redo</div>
            <div class="menu-sep"></div>
            <div>Cut</div>
            <div>Copy</div>
            <div>Paste</div>
            <div class="menu-sep"></div>
            <div>
                <span>Toolbar</span>
                <div>
                    <div>Address</div>
                    <div>Link</div>
                    <div>Navigation Toolbar</div>
                    <div>Bookmark Toolbar</div>
                    <div class="menu-sep"></div>
                    <div>New Toolbar...</div>
                </div>
            </div>
            <div data-options="iconCls:'icon-remove'">Delete</div>
            <div>Select All</div>
        </div>
        <div id="mm2" style="width:100px;">
            <div>Help</div>
            <div>Update</div>
            <div>About</div>
        </div>
        <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
            <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
            <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript
                applications.</p>
        </div>
    </div>
    <!--<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>-->
    <div data-options="region:'west', title:'导航菜单', split:true, minWidth:150, maxWidth:200">
        <div class="easyui-accordion" data-options="multiple:true" style="">
            <div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:0px;">
                <ul class="easyui-tree" data-options="url:'data/default_2.txt',lines:true"></ul>
            </div>
            <div title="Java" style="padding:10px;">
                <p>Java (Indonesian: Jawa) </p>
            </div>
            <div title="C#" style="padding:10px;">
                <p>C# is a multi-paradigm</p>
            </div>
            <div title="Ruby" style="padding:10px;">
                <p>A dynamic</p>
            </div>
            <div title="Fortran" style="padding:10px;">
                <p>Fortran (previously FORTRAN)</p>
            </div>

        </div>
        <!--<ul class="easyui-tree" data-options="url:'data/default_1.txt',lines:true"></ul>-->
    </div>
    <div data-options="region:'center', border:false">
        <div class="easyui-tabs" data-options="fit:true">
            <div title="Tab1" style="padding:2px;display:none;">
                <table id="tab" class="easyui-datagrid" data-options="url:'${ctx}/request/list.json'
                    ,fitColumns:true
                    ,singleSelect:true
                    ,fit:true
                    ,pagination:true
                    ,pageSize:50
                    ,toolbar:toolbar
                    ,loadMsg:'数据正则努力加载中...'">
                    <thead>
                    <tr>
                        <th field="request_url" width="300">请求URL</th>
                        <th field="response_status" width="50">响应码</th>
                        <th field="request_type" width="60">请求类型</th>
                        <th field="query_string" width="220">请求参数</th>
                        <th field="rquest_ip" width="120">客户端IP</th>
                        <th field="client_info">客户端信息</th>
                        <th field="session_id">SESSIONID</th>
                        <th field="request_time">请求时间</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
                <table class="table table-condensed table-hover" width="100%">
                    <tbody>
                    <tr>
                        <td>
                            <label for="j_custom_sale" class="control-label x85">所属业务：</label>
                            <select name="custom.sale" id="j_custom_sale" data-toggle="selectpicker"
                                    data-rule="required">
                                <option value="">全部</option>
                                <option value="1">业务1</option>
                                <option value="2">业务2</option>
                            </select>
                        </td>
                        <td>
                            <label for="j_custom_color" class="control-label x85">表示颜色：</label>
                            <input type="text" name="custom.color" id="j_custom_color" value=""
                                   data-toggle="colorpicker" data-bgcolor="true" size="15" readonly>
                            <a href="javascript:;" title="清除颜色" data-toggle="clearcolor" data-target="#j_custom_color">清除颜色</a>
                        </td>
                        <td colspan="2">
                            <label class="control-label x85">客人照片：</label>
                            <div style="display: inline-block; vertical-align: middle;">
                                <div id="j_custom_pic_up" data-toggle="upload"
                                     data-uploader="ajaxUpload.html?sessionid=?"
                                     data-file-size-limit="1024000000"
                                     data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
                                     data-multi="true"
                                     data-on-upload-success="pic_upload_success"
                                     data-icon="cloud-upload"></div>
                                <input type="hidden" name="custom.pic" value="" id="j_custom_pic">
                                <span id="j_custom_span_pic"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>客人姓名：</label>
                            <input type="text" class="easyui-textbox"
                                   data-options="prompt:'Enter a email address...',validType:'email'" size="15"
                                   style="width:200px;">
                        </td>
                        <td>
                            <label for="j_custom_fname" class="control-label x85">拼音姓：</label>
                            <input type="text" name="custom.fname" id="j_custom_fname" value="Zhang"
                                   data-rule="required;letters" size="15">
                        </td>
                        <td>
                            <label for="j_custom_lname" class="control-label x85">拼音名：</label>
                            <input type="text" name="custom.lname" id="j_custom_lname" value="San"
                                   data-rule="required;letters" size="15">
                        </td>
                        <td>
                            <label for="" class="control-label x85">性别：</label>
                            <input type="radio" name="custom.isshow" id="j_custom_sex1" data-toggle="icheck"
                                   value="true" data-rule="checked" data-label="男&nbsp;&nbsp;">
                            <input type="radio" name="custom.isshow" id="j_custom_sex2" data-toggle="icheck"
                                   value="false" data-label="女">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="j_custom_birthday" class="control-label x85">出生日期：</label>
                            <input type="text" name="custom.birthday" id="j_custom_birthday" value="1980-08-08"
                                   data-toggle="datepicker" data-rule="required;date" size="15">
                        </td>
                        <td>
                            <label for="j_custom_birthplace" class="control-label x85">出生地：</label>
                            <input type="text" name="custom.birthplace" id="j_custom_birthplace" value="四川"
                                   data-rule="required" size="15">
                        </td>
                        <td>
                            <label for="j_custom_add" class="control-label x85">居住地：</label>
                            <input type="text" name="custom.add" id="j_custom_add" value="成都九眼桥" data-rule="required"
                                   size="15">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <label for="j_custom_passportno" class="control-label x85">护照号：</label>
                            <input type="text" name="custom.passportno" id="j_custom_passportno" value=""
                                   data-rule="required" size="15">
                        </td>
                        <td>
                            <label for="j_custom_issuedate" class="control-label x85">签发日期：</label>
                            <input type="text" name="custom.issuedate" id="j_custom_issuedate" value="2014-10-01"
                                   data-toggle="datepicker" data-rule="required;date" size="15">
                        </td>
                        <td>
                            <label for="j_custom_indate" class="control-label x85">有效日期：</label>
                            <input type="text" name="custom.indate" id="j_custom_indate" value="2024-09-30"
                                   data-toggle="datepicker" data-rule="required;date" size="15">
                        </td>
                        <td>
                            <label for="j_custom_issueat" class="control-label x85">签发地：</label>
                            <input type="text" name="custom.issueat" id="j_custom_issueat" value="成都"
                                   data-rule="required" size="15">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="j_custom_profession" class="control-label x85">职业：</label>
                            <input type="text" name="custom.profession" id="j_custom_profession" value="耍家" size="15"
                                   data-toggle="lookup" data-url="table-edit-lookup.html" data-group="custom"
                                   data-width="600" data-height="300">
                        </td>
                        <td>
                            <label for="j_custom_mobile" class="control-label x85">手机：</label>
                            <input type="text" name="custom.mobile" id="j_custom_mobile" value=""
                                   data-rule="required;mobile" size="15">
                        </td>
                        <td colspan="2">
                            <label for="j_custom_tags" class="control-label x85">关键字：</label>
                            <input type="text" name="custom.tags" id="j_custom_tags" value="" data-toggle="tags"
                                   data-url="ajaxTags.html" data-width="400" size="15" placeholder="输入关键字，回车提交">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="" class="control-label x85">占床：</label>
                            <input type="checkbox" name="custom.room" id="j_custom_room" data-toggle="icheck"
                                   value="true" data-label="是否占床" checked data-rule="checked">
                        </td>
                        <td>
                            <label for="" class="control-label x85">签证：</label>
                            <input type="checkbox" name="custom.visa" id="j_custom_visa" data-toggle="icheck"
                                   value="true" data-label="需要签证">
                        </td>
                        <td>
                            <label for="" class="control-label x85">素食：</label>
                            <input type="checkbox" name="custom.vegetarian" id="j_custom_vegetarian"
                                   data-toggle="icheck" value="true" data-label="是否素食">
                        </td>
                        <td>
                            <label for="j_custom_total" class="control-label x85">同行人数：</label>
                            <input type="text" name="custom.total" id="j_custom_total" value="1" size="5"
                                   data-toggle="spinner" data-min="0" data-max="100" data-step="1" data-rule="integer">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <label for="j_custom_note" class="control-label x85">备注：</label>
                            <textarea name="custom.note" id="j_custom_note" data-toggle="autoheight" cols="60"
                                      rows="1"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <label for="j_custom_content" class="control-label x85">内容编辑：</label>
                            <div style="display: inline-block; vertical-align: middle;">
                            <textarea name="content" id="j_form_content" class="j-content" style="width: 700px;"
                                      data-toggle="kindeditor" data-minheight="200">
                                <p><strong>HTML编辑器KindEditor：</strong></p>
                                <p><strong>已优化：</strong></p>
                                <ul>
                                    <li>深度清理html标记</li>
                                    <li>上传附件后，自动获取文件名（需要返回JSON属性"origin_name"）</li>
                                    <li>修改一键排版为段落前空两个全角空格，主要考虑到某些行需要顶格时直接删除空格即可。</li>
                                </ul>
                                <p><br>更多参数请参见：<a href="http://kindeditor.net/"
                                                  target="_blank">http://kindeditor.net/</a></p>
                            </textarea>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
            <div title="Tab4" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
            <div title="Tab5" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
            <div title="Tab6" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
            <div title="Tab7" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
            <div title="Tab8" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
            <div title="Tab9" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
        </div>
    </div>
    <div data-options="region:'south'" style="height:30px;line-height:25px;text-align: center;">
        Copyright © 2013 - 2015　成都锦杨科技
    </div>
</div>
<script type="text/javascript">
    $(function(){
        //判断节点点击是否为某个元素进行隐藏
        $(document).bind('click', function(e){
            if(!($(e.target).parents('.dropdown').length > 0))
                $("ul.dropdown-menu").hide('fast');
        });
        //节点下拉显示隐藏
        $(".dropdown").bind('click', function() {
            var top = $(this).position().top + $(this).height() + 8 +'px';
            var d_menu = $(this).find("ul.dropdown-menu");
            d_menu.css({top: top});
            if(d_menu.is(':hidden')) {
                $(this).parent().find("ul.dropdown-menu").hide('fast');
                d_menu.show('fast');
            }else {
                d_menu.hide('fast');
            }
        });
    })
    var toolbar = [{
        text: 'Add',
        iconCls: 'icon-add',
        handler: function () {
            alert('add')
        }
    }, {
        text: 'Cut',
        iconCls: 'icon-cut',
        handler: function () {
            alert('cut')
        }
    }, '-', {
        text: 'Save',
        iconCls: 'icon-save',
        handler: function () {
            alert('save')
        }
    }];
</script>
</body>
</html>